<!-- 排班管理 -->
<template>
  <div class="dashboard-container transport-task customer-list-box">
    <div class="app-container">
      <div class="box">
        <el-card
          class="search-card-box"
          shadow="never"
        >
          <el-form
            ref="formData"
            label-width="95px"
            :model="formData"
          >
            <el-row :gutter="60">
              <el-col :span="8">
                <el-form-item
                  label="员工账号:"
                  style="margin-bottom: 0px"
                >
                  <el-input
                    v-model="formData.employeeNumber"
                    placeholder="请输入员工账号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="员工姓名:"
                  style="margin-bottom: 0px"
                >
                  <el-input
                    v-model="formData.name"
                    placeholder="请输入员工姓名"
                  />
                </el-form-item>
              </el-col>
              <!-- 工作模式下拉 -->
              <el-col :span="8">
                <el-form-item
                  label="工作模式:"
                  style="margin-bottom: 0px"
                  label-width="100px"
                  prop="workPatternId"
                >
                  <el-select
                    v-model="formData.workPatternId"
                    placeholder="请选择工作模式"
                  >
                    <el-option
                      v-for="item in workList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 按照月份进行查找，且仅可查最近三个月 -->
              <el-col :span="8">
                <el-form-item
                  label="月份:"
                  style="margin-top: 20px; margin-bottom: 0px"
                >
                  <el-date-picker
                    v-model="formData.month"
                    type="month"
                    placeholder="请选择月份"
                    value-format="yyy-MM"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <!-- 所属机构 -->
              <el-col :span="8">
                <el-form-item
                  prop="agencyId"
                  label="所属机构:"
                  style="margin-top: 20px; margin-bottom: 0px"
                >
                  <treeselect
                    v-model="formData.agentId"
                    :options="agencyOptions"
                    :normalizer="normalizer"
                    :searchable="true"
                    style="width: 100%"
                    placeholder="请选择所属机构"
                    no-options-text="暂无数据"
                    no-results-text="暂无数据"
                    @select="selectAgency"
                    @open="open"
                    @close="close"
                  />
                  <img
                    ref="arrow"
                    src="../../assets/pullDown.png"
                    style="position:absolute;width:18px;height:18px;right:9px;top:12px;cursor:pointer;pointer-events:none;transition-duration:0.3s"
                  />
                </el-form-item>
              </el-col>
              <!-- 搜索重置功能 -->
              <el-col
                :span="8"
                style="margin-top: 20px"
              >
                <el-button
                  type="warning"
                  @click="searchOk"
                >搜索</el-button>
                <el-button
                  plain
                  @click="resetForm"
                >重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <!-- 渲染按钮 -->

      <el-card
        shadow="never"
        class="table-card-box"
      >
        <el-button
          type="warning"
          style="margin-bottom:20px"
          @click="scheduling"
        >排班设置</el-button>
        <el-button
          plain
          style="margin-bottom:20px"
          @click="binding"
        >绑定排班</el-button>
        <!-- 渲染列表 -->
        <el-table
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="100"
          > </el-table-column>
          <el-table-column
            prop="employeeNumber"
            label="员工账号"
            width="120"
            fixed="left"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="员工姓名"
            width="120"
            fixed="left"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="员工电话"
            width="120"
            fixed="left"
          >
          </el-table-column>

          <el-table-column
            prop="userType"
            label="员工角色"
            width="120"
            fixed="left"
          >
            <template v-slot="{ row }">
              <span v-if="row.userType===1">员工</span>
              <span v-else-if="row.userType===2">快递员</span>
              <span v-else>司机</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="workPatternName"
            label="当前工作模式"
            width="120"
            fixed="left"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.workPatternName?scope.row.workPatternName:'暂无排班' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item,index) in employeeList"
            :key="index"
            prop="address"
            :label="item"
          >
            <template slot-scope="scope">
              <div
                :class="{
                  work: scope.row.workSchedules[index],
                  rest: !scope.row.workSchedules[index]
                }"
              >
                {{ scope.row.workPatternName?scope.row.workSchedules[index] ? '上' : '休': '无' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <!-- <el-pagination
            :current-page="formData.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination> -->
          <el-pagination
            :current-page="formData.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-row>
        <!-- 绑定排班弹层 -->
        <el-dialog
          title="人工调整"
          :visible.sync="dialogVisible"
          width="35%"
          @close="handleClose"
        >
          <el-form
            label-width="100px"
          >
            <el-form-item>
              <el-radio
                v-model="workShedulingsForm.workPatternType"
                label="1"
              >礼拜制</el-radio>
              <el-radio
                v-model="workShedulingsForm.workPatternType"
                label="2"
              >连续制</el-radio>
            </el-form-item>
          </el-form>

          <el-form label-width="100px">
            <el-form-item label="模式名称:">
              <el-select v-model="workShedulingsForm.workPatternId">
                <el-option
                  v-for="item in workList1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <el-row
              type="flex"
              justify="center"
              style="margin-bottom:30px"
            >
              <el-button
                type="warning"
                @click="btnPeopleSetConfirm"
              >确认</el-button>
              <el-button
                plain
                style="width:89px"
                @click="handleClose"
              >取消</el-button>
            </el-row>
          </template>
        </el-dialog>
      </el-card>

    </div>
  </div>
</template>
<script>
import { workManage, selectWorkHistoryList, peopleSet } from '@/api/transit'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { agencyList } from '@/api/institutions'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      list: [],
      workList: [], // 下拉工作列表
      workList1: [], // 下拉工作列表
      employeeList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      agencyOptions: [], // 所属机构树
      total: 0,
      searchkey: false,
      schedulingInfor: [], // 排班信息
      formData: {
        page: 1, // 第几页
        pageSize: 10, // 每页多少条
        workPatternId: '', // 工作模式id
        employeeNumber: '', // 员工账号
        name: '', // 员工名称
        month: '', // 月份
        agentId: null // 机构id
      },
      workShedulingsForm: {
        userIdList: [], // 选择员工id数组
        workPatternType: '', // 工作模式类型
        userType: '', // 用户类型,1:员工，2:快递员，3:司机
        workPatternId: '' // 工作模式id
      },
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      length: '',
      dialogVisible: false// 绑定排班弹窗
    }
  },
  created() {
    this.getList()
    this.getWorkMangeList()
    this.getAgencyList()
  },
  methods: {
    // 获取排班列表数据
    async getList() {
      const res = await workManage(this.formData)
      // console.log(res)
      this.list = res.data.items
      // + 字符串转数字
      this.total = +res.data.counts
      console.log(this.total)
    },
    // 获取工作模式下拉数据
    async getWorkMangeList() {
      try {
        const { data } = await selectWorkHistoryList()
        // console.log('数据', data)
        // console.log(...data[2])
        this.workList = [...data['1'], ...data['2']]
        // console.log('this.workList', this.workList)
        if (this.workShedulingsForm.workPatternType === '1') {
          this.workList1 = [...data['1']]
        } else {
          this.workList1 = [...data['2']]
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 打开所属机构下拉框
    open() {
      this.$refs.arrow.style.transform = 'rotate(-180deg)'
    },
    // // 关闭所属机构下拉框
    close() {
      this.$refs.arrow.style.transform = 'rotate(0deg)'
    },
    // 获取起始/目的地机构列表数据
    async getAgencyList() {
      // 读取数据
      const { data: res } = await agencyList()
      // 获取数据给options
      this.agencyOptions = JSON.parse(res)
      console.log(this.agencyOptions)
    },
    // 赋予搜索id为搜索框内的数据
    selectAgency(val) {
      this.rangeSearchFormData.agentId = val.id
    },
    // 搜索功能
    async searchOk() {
      // this.formData.page = 1
      // this.getList(this.formData)
      // this.searchkey = true
      const res = await workManage(this.formData)
      // console.log(res)
      this.list = res.data.items
      this.getList()
    },
    // 重置表单
    resetForm() {
      this.$refs.formData.resetFields()
      this.formData.employeeNumber = ''
      this.formData.name = ''
      this.formData.month = ''
      this.formData.workPatternId = ''
      this.formData.agentId = null
      this.searchkey = false
      this.getList()
    },
    // 排班设置跳转
    scheduling() {
      this.$router.push('workArrange-setting')
    },
    // 绑定排班按钮
    binding() {
      this.dialogVisible = true
      this.workSchedulingsForm = {
        userIdList: [], // 选择的员工id数组
        userType: '',
        workPatternId: '', // 工作模式ID
        workPatternType: '1' // 工作模式类型1:礼拜制，2：连续制
      }
    },
    // 弹窗关闭
    handleClose() {
      this.dialogVisible = false
      this.workSchedulingsForm = {
        userIdList: [], // 选择的员工id数组
        userType: '',
        workPatternId: '', // 工作模式ID
        workPatternType: '1' // 工作模式类型1:礼拜制，2：连续制
      }
    },
    // 绑定排班单选按钮切换
    changeWorkPatternType() {
      this.getSelectWorkHistoryList()
    },
    // 绑定排班确认按钮
    async btnPeopleSetConfirm() {
      try {
        await peopleSet(this.workSchedulingsForm)
        this.getWorkMangeList()
        this.handleClose()
        this.$message.success('绑定成功')
      } catch (error) {
        console.log(error)
      }
    },
    handleOpen() {
      if (this.workSchedulingsForm.userIdList.length === 0) {
        this.$message.error('请选择排班员工')
        return 0
      } else {
        this.dialogVisible = true
      }
    },
    // 每页信息显示条数
    handleSizeChange(val) {
      this.formData.pageSize = val
      if (this.formData.page === 1) {
        this.getList(this.formData)
      }
    },
    // 切换页码
    handleCurrentChange(val) {
      this.formData.page = val
      this.getList()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ th.date {
  .cell {
    padding-left: 17px !important;
  }
}
.work {
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
.history-name {
  width: auto !important;
  /deep/ .el-input__inner {
    width: 293px;
  }
}

.workArrange-manage-people-setting {
  /deep/ .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }
  /deep/ .el-dialog__footer {
    padding-bottom: 40px;
  }
}

.work-type {
  /deep/ .el-form-item__content {
    margin-left: 40px !important;
  }
  /deep/ .el-radio:first-child {
    margin-right: 80px !important;
  }
  /deep/.el-radio__label {
    font-weight: bold;
    color: #333333;
  }
}

.dialog-footer {
  .el-button {
    width: 89px;
    height: 36px;
    padding: 10px 20px;
  }
}

.rest {
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
.transport-task /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;
  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}
/deep/ .el-card {
  overflow: initial;
}
</style>

<style>
.box{
  padding-bottom:20px ;
}
.tabel {
  padding-bottom: 10px;
}
.emp{
  padding: 20px;
  border-radius: 5px;
  margin-top: 20px;
  background-color:white;
}
</style>
